<script setup>
import { onMounted, ref } from "vue";
import newsItem from "./components/newsItem.vue";
import { queryHot } from "@/api/common.js";
let search = ref("");
let csdnHot = ref([]);
let weiboHot = ref([]);
let toutiaoHot = ref([]);
let zhihuHot = ref([]);
let dialogVisible = ref(false);
let searchType = ref("baidu");
let typeList = [
  {
    name: "csdn",
    icon: "csdn",
  },
  {
    name: "百度",
    icon: "baidu",
  },
  {
    name: "码云",
    icon: "gitee",
  },
  {
    name: "Github",
    icon: "github",
  },
  {
    name: "哔哩哔哩",
    icon: "bili",
  },
  {
    name: "知乎",
    icon: "zhihu",
  },
];

onMounted(() => {
  getList();
});
const getCsdn = async () => {
  const res = await queryHot("csdn");
  console.log(res, "csdn");
  csdnHot.value = res.data.filter((item, index) => index < 10);
};
const getWeibo = async () => {
  const res = await queryHot("weibo");
  console.log(res, "weibo");
  weiboHot.value = res.data.realtime.filter((item, index) => index < 10);
};
const getToutiao = async () => {
  const res = await queryHot("toutiao");
  console.log(res, "toutiao");
  toutiaoHot.value = res.data.filter((item, index) => index < 10);
};
const getZhihu = async () => {
  const res = await queryHot("zhihu");
  console.log(res, "zhihu");
  zhihuHot.value = res.data;
};

const getList = () => {
  getCsdn();
  getZhihu();
  getToutiao();
  getWeibo();
};

const handleSearch = () => {
  console.log(search.value, "content");
  search.value = ""

  switch(searchType.value) {
    case "bili":
      window.open(`https://search.bilibili.com/all?keyword=${search.value}`);
      break;
    case "zhihu":
      window.open(`https://www.zhihu.com/search?type=content&q=${search.value}`)
      break;
    case "baidu":
      window.open(`https://www.baidu.com/s?&wd=${search.value}`);
      break;
    case "gitee":
      window.open(`https://search.gitee.com/?skin=rec&type=repository&q=${search.value}`)
      break;
    case "github":
      window.open(`https://github.com/search?q=${search.value}`);
      break;
    case "csdn":
      window.open(`https://so.csdn.net/so/search?q=${search.value}`);
      break;
  }
};

const handleChangeSearchType = (type)=>{
  searchType.value = type;
  dialogVisible.value = false
}
</script>

<template>
  <div class="container">
    <div class="search">
      <span @click="dialogVisible = !dialogVisible">
        <svg-icon :name="searchType" width="28px" height="28px"></svg-icon>
      </span>
      <el-input v-model="search" placeholder="输入关键词搜索" />
      <el-button icon="Search" @click="handleSearch" />
    </div>
    <div class="news">
      <newsItem :news="csdnHot" type="csdn" />
      <newsItem :news="zhihuHot" type="zhihu" />
      <newsItem :news="weiboHot" type="weibo" />
      <newsItem :news="toutiaoHot" type="toutiao" />
    </div>
    <el-dialog v-model="dialogVisible" :show-close="false">
      <div class="items">
        <div class="item" v-for="item in typeList" :key="item.name" @click="handleChangeSearchType(item.icon)">
          <svg-icon :name="item.icon" width="36px" height="36px"></svg-icon>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 80%;
  margin: 0 auto;
  margin-top: 60px;
  .news {
    display: flex;
    flex-wrap: wrap;
  }
  .search {
    position: relative;
    justify-content: center;
    display: flex;
    margin-bottom: 50px;
    height: 40px;
    span {
      display: flex;
      align-items: center;
      cursor: pointer;
      height: 100%;
      border: 1px solid #e4e7ed;
      border-right: none;
      padding-left: 20px;
      padding-right: 20px;
    }
    .el-input {
      width: 60%;
    }
    .el-button {
      height: 100%;
      border-left: none;
    }
  }
}
:deep(.el-dialog) {
  margin-top: 170px;
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__body {
    padding: 5px;
  }
  .items {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
    padding-bottom: 0;
  }
  .item {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    margin-right: 15px;
    width: 90px;
    height: 90px;
    cursor: pointer;
    .name {
      margin-top: 10px;
    }
    &:hover {
      background-color: #e8f3ff;
      color: #1e80ff;
    }
  }
}
</style>
